<template>
	<div class="paymentcrat">
		<el-row justify="space-between">
			<el-col>
				<span>正在付款...</span>
			</el-col>
		</el-row>
		<div class="cart-bottom"></div>
		<div class="paymentcrat-button">
			<el-button>订单编号</el-button>
			<el-input v-model="ordid" readonly />
			<el-button>收货地址</el-button>
			<el-input v-model="address" readonly />
			<el-button>收货电话</el-button>
			<el-input v-model="phone" readonly />
			<el-button>付款状态</el-button>
			<template v-if="!flag">
				<el-button type="danger" @click="pay()">未付款，点击这里去扫描付款</el-button>
			</template>
			<template v-else>
				<el-button type="success">已经付款</el-button>
			</template>
			<el-dialog v-model="centerDialogVisible" width="30%" center>
				<template #title>
					支付金额：{{TotalPrice}}
				</template>
				<div class="images">
					<img src="../../../../public/img/Waterlist01.jpg" />
				</div>
				<template #footer>
					<span class="dialog-footer">
					  <el-button @click="centerDialogVisible = false">取消</el-button>
					  <el-button type="primary" @click="getPay()" >确认支付</el-button>
					</span>
				</template>
			</el-dialog>
		</div>
		<el-table
		border
		ref="multipleTable"
		:data="paymentList"
		style="width: 100%"
		highlight-current-row
		>
			<el-table-column label="图片" >
			  <template #default="scope">
				<img :src="`${$Imgurl}/api/public/showImg/${scope.row.book.picture}`" >
			  </template>
			</el-table-column>
			<el-table-column  label="商品名称">
				<template #default="scope">
					{{scope.row.book.name}}
				  </template>
			</el-table-column>
			<el-table-column label="商品价钱">
				<template #default="scope">
					{{scope.row.book.price}}
				  </template>
			</el-table-column>
			<el-table-column  label="商品数量">
				<template #default="scope">
					 {{scope.row.cart.num}}
				  </template>
			</el-table-column>
			<el-table-column property="name" label="商品总价" >
				<template #default="scope">
					{{scope.row.cart.num*scope.row.book.price}}
				  </template>
			</el-table-column>
		</el-table>
	</div>
</template>

<script>
	import { ElMessage } from 'element-plus'
	export default {
		name:'PaymentCrat',
		data(){
			return{
				paymentList:[],
				centerDialogVisible:false,
				TotalPrice:0,
				ordid:0,//订单编号
				address:"",//收货地址
				phone:'',//收货电话
				flag:false,//付款状态
			}
		},
		methods:{
			pay(){
				this.centerDialogVisible=true
			},
			getPay(){
				this.centerDialogVisible=false
				let obj = {ispay:0,ordid:this.ordid}
				this.axios.post(`/api/fore/ord/addPay`,obj).then((res)=>{
					this.flag=true
					ElMessage({message:"支付成功",type: "success"})
					setTimeout(()=>{
						localStorage.removeItem('cartlist')
						localStorage.removeItem('ordid')
						this.$router.push({path:'/cart'})
					},200)
				})
			}
		},
		created() {
			this.paymentList = JSON.parse(localStorage.getItem('cartlist'));
			if(!this.paymentList){
				this.$router.push({path:'/cart'})
				return false;
			}
			for(let temp of this.paymentList){
				this.TotalPrice+=temp.book.price*temp.cart.num;
			};
			this.ordid = localStorage.getItem('ordid')
			this.axios.get(`/api/fore/ord/findInfoByOrdid/${this.ordid}`).then((res)=>{
				this.address = res.data.data.ord.addr
				this.phone = res.data.data.ord.phone
			}).catch((error)=>{
				console.log(error);
			})
		}
	}
</script>

<style scoped>
	.el-input-group{
		margin: 10px 0;
	}
	:deep(.el-table__cell img){
		width: 80px;
		height: 60px;
	}
	.el-row{
		width: 98%;
		margin:  0 auto;
	}
	.el-col{
		font-size: 18px;
		font-weight: bold;
		line-height: 60px;
	}
	.cart-bottom{
		width: 98%;
		margin: 5px auto;
		margin-bottom: 10px;
		border-bottom: 2px solid #7f7f7f;
	}
	.paymentcrat-button {
		margin: 0 auto;
		width: 95%;
	}
	.paymentcrat-button .el-input{
		width: 92%;
	}
	.images{
		width: 70%;
		height: 40%;
		margin:  0 auto;
	}
	.images img{
		width: 100%;
		height: 100%;
	}
</style>
